<template>
	<div class="qrcode-container">
		<el-dialog title="扫码绑定" v-model="isShowDialog" width="350">
			<div class="scan-mode mb10">
				<div class="scan-mode-item" v-for="(mode, index) in scanModes" :key="index" @click="onChangeQRCode(mode)">
					<el-avatar :src="icons[mode].src" />
					<div class="scan-mode-text font14">{{icons[mode].name}}</div>
				</div>
			</div>
			<center>
				<QrcodeContainer :model="scanMode"></QrcodeContainer>
			</center>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive } from 'vue';
import QrcodeContainer from '/@/views/login/component/qrcode.vue';

export default {
	name: 'socialuser/bind',
	components: { QrcodeContainer },
	setup() {
		const state = reactive({
			handleMessage: undefined,
			isShowDialog: false,
			scanMode: 'QQ',
			scanModes: ['QQ','WEIXIN','QIYE_WEIXIN','FEISHU','DINGDING'],
			icons: {
				QQ: {
					name: 'QQ',
					src: './images/login/qq.png',
				},
				WEIXIN: {
					name: '微信',
					src: './images/login/weixin.png',
				},
				QIYE_WEIXIN: {
					name: '企微',
					src: './images/login/qiye_weixin.png',
				},
				FEISHU: {
					name: '飞书',
					src: './images/login/feishu.png',
				},
				DINGDING: {
					name: '钉钉',
					src: './images/login/dingding.png',
				},
			}
		});
		
		const onChangeQRCode = (mode: string) => {
			state.scanMode = mode;
		}
		
		// 打开弹窗
		const openDialog = () => {
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		
		return {
			openDialog,
			closeDialog,
			onChangeQRCode,
			...toRefs(state),
		};
	}
}
</script>

<style scoped lang="scss">
.qrcode-container {
	.scan-mode {
		margin: 5px auto;
		display: flex;
		justify-content: space-around;
		width: 100%;
		.scan-mode-item{
			margin-right: 20px;
			cursor: pointer;
			.scan-mode-text {
				margin-top: 5px;
				color: var(--el-text-color-placeholder);
				text-align: center;
			}
		}
	}
	:deep .el-avatar {
		background: none;
	}
}
</style>